<template>
  <div class="main">
    <TopBar title="菜单"></TopBar>
    <div class="wrapper">
      <list class="list-menu">
        <cell @click="jump('/saoLei')" class="cell-menu"><text class="text-menu">单机内容</text></cell>
        <cell class="cell-kongbai"></cell>
        <cell @click="jump('/webView')" class="cell-menu"><text class="text-menu">线上内容</text></cell>
      </list>
    </div>
  </div>
</template>

<script>
import TopBar from '@/components/TopBar'
export default {
  name: 'Menu',
  components: { TopBar },
  methods: {
    jump (to) {
      console.log('to=' + to)
      if (this.$router) {
        this.$router.push(to)
      }
    }
  }
}
</script>

<style scoped>
  .main {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .wrapper {
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 90px;
    bottom: 0;
  }
  .list-menu {
    align-items: center;
    justify-content: center;
    height: 700px;
  }
  .cell-kongbai {
    width: 600px;
    height: 100px;
  }
  .cell-menu {
    width: 600px;
    border-style: solid;
    border-width: 1px;
    border-color: #00ddff;
    border-radius: 5px;
    background-color: #00ffff;
    justify-content: center;
    align-items: center;
    height: 300px;
  }
  .text-menu {
    font-size: 100px;
    color: #fff;
  }
</style>
